<!-- 首页 -->
<template>
	<view class="container">
		<TopNav :title="title"></TopNav>
		<view class="">
			<text class="text-dark f-s20 text-bold">请输入您的银行卡信息</text>
		</view>
		<view class="text-gray m-t10 f-s14">
			<text>请绑定持卡人本人的银行卡</text>
		</view>
		<view class="card m-t20 radius bg-white">
			<view class="form-item">
				<text class="form-item-title">持卡人姓名</text>
				<u-input placeholder="请输入持卡人姓名" border="none" inputAlign="right"
					form-item-placeholder="form-item-placeholder" v-model="form.realname" readonly></u-input>
			</view>
			<view class="form-item">
				<text class="form-item-title">选择银行</text>
				<view class="relative" @click="handleToPath">
					<u-input placeholder="请选择银行" border="none" inputAlign="right"
						form-item-placeholder="form-item-placeholder" readonly v-model="form.bank" class="pointer-none">
						<image slot="suffix" src="/static/images/index/more-1.png" class="width-22 height-22" mode="">
						</image>
					</u-input>
				</view>

			</view>
			<view class="form-item">
				<text class="form-item-title">银行卡号</text>
				<u-input type="number" placeholder="请输入银行卡号码" border="none" inputAlign="right"
					form-item-placeholder="form-item-placeholder" v-model="form.account" maxlength="19"></u-input>
			</view>
		</view>
		<view class="m-t10">
			<text class="text-gray f-s14">注意：请确保填写的银行卡姓名和平台实名认证的姓名一致，否则将无法正常收到款项。</text>
		</view>
		<view class="flex justify-center fixed-bottom" v-if="form.id">
			<view class="self-btn m-r10" style="background-color:#DDE0E6;width: 194rpx;" hover-class="pressed"
				@click="handleUnbind">
				<text class="text-black f-w500 f-s16">解绑</text>
			</view>
			<view class="self-btn flex flex-direction" hover-class="pressed" style="width: 488rpx;"
				@click="handleSubmit">
				<text class="f-s16 line-height22">确认</text>
			</view>
		</view>
		<view class="fixed-bottom bg-white full-width p-lr16" hover-class="pressed" @click="handleSubmit" v-else>
			<view class="self-btn full-width">
				<text>确认</text>
			</view>
		</view>
		<Toast></Toast>
	</view>
</template>

<script>
	import {
		bankBind,
		unbankBind
	} from "@/api/mine/pay.js"
	export default {
		name: "",
		data() {
			return {
				title: '绑定银行卡',
				form: {
					
					id: '',
					realname: '',
					account: '',
					bank: ''
				}
			}
		},
		onLoad(query) {
			let info = JSON.parse(decodeURIComponent(query.info))
			if (info) {
				if (info.title) this.title = info.title
				for (let key in this.form) {
					if (info[key]) {
						this.form[key] = info[key]
					}
				}
			}
		},
		onUnload() {
			uni.$off('bankSelect', this.handleSelectBank)
		},
		methods: {
			handleSelectBank(select) {
				let {
					title
				} = select
				this.form.bank = title
			},
			handleToPath() {
				uni.$on('bankSelect', this.handleSelectBank)
				this.$tab.navigateTo('bank-select')
			},
			handleUnbind() {
				this.$modal.loading("正在解绑").then(() => {
					unbankBind({
						id: this.form.id
					}).then(res => {
						this.$modal.closeLoading()
						uni.$emit('bankAdd')
						this.$toast(res.msg).then(() => {
							this.$tab.navigateBack()
						})
					}).catch(() => this.$modal.closeLoading())
				})
			},
			handleSubmit() {
				if (!this.validateForm(this.form)) return
				this.$modal.loading("提交中").then(res => {
					bankBind(this.form).then(res => {
						this.$modal.closeLoading()
						uni.$emit('bankAdd')
						this.$toast(res.msg).then(() => {
							this.$tab.navigateBack()
						})

					}).catch(() => {
						this.$modal.closeLoading()
					})
				})


			},
			validateForm(form) {
				// 校验真实姓名
				if (!form.realname) {
					this.$toast('请输入持卡人姓名');
					return false;
				} else {
					const chineseRegex = /^[\u4e00-\u9fa5]+$/;
					if (!chineseRegex.test(form.realname)) {
						this.$toast('请输入真实姓名');
						return false;
					}
				}

				// 校验卡号
				if (!form.account) {
					this.$toast('请输入银行卡号');
					return false;
				} else {
					// 去除所有空格
					const trimmedCardNumber = form.account.replace(/\s+/g, '');
					// 校验是否为12到19位的数字
					const regex = /^\d{12,19}$/;
					if (!regex.test(trimmedCardNumber)) {
						this.$toast('银行卡号格式不正确');
						return false;
					}
				}

				// 校验银行
				if (!form.bank) {
					this.$toast('请选择银行');
					return false;
				}

				// 所有校验通过
				return true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 40rpx 32rpx;

		.pointer-none {
			pointer-events: none;
		}

		.form-item {
			padding: 34rpx 24rpx 34rpx 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.form-item-title {
				font-weight: 400;
				font-size: 30rpx;
				color: #121924;
				line-height: 40rpx;
			}

			::v-deep .uni-input-input {
				font-size: 30rpx;
				color: #585D66 !important;
			}

			::v-deep .form-item-placeholder {
				font-weight: 400;
				font-size: 30rpx;
				color: #B2B8C1;
				line-height: 40rpx;
			}


		}
	}
</style>